<!-- 产品类型 -->
<template>
	<pro-table
		ref="protable"
		rowKey="prodTypeId"
		:loadDataUrl="api.getList"
		:columns="columns"
		:isAdd="$_has('sys:prodType:insert')"
		:isDelete="$_has('sys:prodType:delete')"
		:isHideOrgName="false"
		:orgId="globalOrgId"
		:extendParam="{
			orgId: globalOrgId,
		}"
		:showPagination="false"
		@selectedRowChange="onSelectChange"
		@addRecord="addRecord"
		@showDeleteConfirm="showDeleteConfirm"
		@handlerSearch="handlerSearch"
		@handlerReset="handlerReset"
	>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-has="'sys:prodType:update'" title="编辑" class="edit" @click="editRecord(record)"
				>编辑</a
			>
			<a
				href="javascript:;"
				v-has="'sys:prodType:delete'"
				title="删除"
				class="del"
				@click="showDeleteConfirm(1, record.prodTypeId, record.prodTypeName)"
				>删除</a
			>
		</span>
		<!-- 添加，编辑 -->
		<add-or-edit-product-type-modal
			:api="api"
			editKey="prodTypeId"
			modalTitle="产品类型"
			ref="addOrEditModal"
			@ok="handlerRefresh"
		></add-or-edit-product-type-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins'
import { deviceManageapi } from '@/api/index.js'
import { filterName } from '@/utils/base.js'
import addOrEditProductTypeModal from './module/addOrEditProductTypeModal'
const columns = [
	{
		title: '产品类型',
		dataIndex: 'prodTypeName',
		key: 'prodTypeName',
		ellipsis: true,
	},
	{
		title: '产品类型编号',
		dataIndex: 'prodTypeCode', // data数据源中对应的字段
		key: 'prodTypeCode', // 列的关键字 如果有 dataIndex 则不需要key
		ellipsis: true,
	},

	{
		title: '操作',
		key: 'operation',
		scopedSlots: {
			customRender: 'operation',
		},
		width: 160,
		fixed: 'right',
	},
]
export default {
	name: 'devicelist',
	mixins: [rowSelection, recordOperation],
	components: {
		addOrEditProductTypeModal,
	},
	data() {
		return {
			columns: columns,
			filterName,
			api: deviceManageapi.prodTypeUrl,
			filter: {
				state: '',
			},
			countData: [{}],
			spinning: false,
		}
	},
	created() {
		this.columns = columns.filter((item) => {
			if (!(!this.isAdmin && item.key == 'deptName')) {
				return item
			}
		})
		let newcolumns = [...this.columns]
		this.columns = [...newcolumns]
	},
	methods: {
		handlerSearch(obj) {
			this.$refs.protable.loadTable(obj)
		},
	},
}
</script>

<style scoped="scoped" lang="less">
/deep/.deviceCount {
	position: relative;

	.devcount-item {
		padding: 10px 20px 0;
		text-align: center;
		//cursor: pointer;

		p {
			margin: 0;
		}

		.name {
			.ant-badge-status-text {
			}

			h2 {
				margin: 0;
			}
		}

		.num {
			font-size: 26px;
		}
	}

	.devcount-item.active {
		color: #108ee9;

		.name {
			.ant-badge-status-text {
				color: #108ee9;
			}
		}
	}

	.refresh {
		position: absolute;
		font-size: 24px;
		color: #000;
		top: 50%;
		right: 25px;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		cursor: pointer;
	}
}
</style>
